<!--
 * @Author: yuanweijiang
 * @Date: 2024-01-03 14:19:33
 * @LastEditors: yuanweijiang
-->
<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef" class="flex items-center">
				<el-form-item prop="fileNameCh">
					<el-input placeholder="请输入文件名称" clearable style="max-width: 180px" v-model="state.queryForm.fileNameCh" />
				</el-form-item>
				<el-form-item>
					<el-button @click="query" class="ml10" icon="search" type="primary"> 查询 </el-button>
					<el-button icon="Refresh" @click="resetQuery">重置</el-button>
				</el-form-item>
				<div class="absolute right-8">
					<el-form-item>
						<el-button @click="fileAdd" class="ml10" icon="Upload" type="primary"> 文件上传 </el-button>
					</el-form-item>
					<!-- <el-form-item>
						<el-button class="ml10" icon="Download" :disabled="ids.length === 0"> 批量导出 </el-button>
					</el-form-item> -->
					<el-form-item>
						<el-button class="ml10" icon="Delete" :disabled="ids.length === 0" @click="handleUplaod"> 批量导出 </el-button>
						<el-button class="ml10" icon="Delete" :disabled="ids.length === 0" @click="handleDeletes"> 批量删除 </el-button>
					</el-form-item>
				</div>
			</el-form>
			<el-table
				ref="tableRef"
				:data="state.dataList"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
				row-key="path"
				style="width: 100%"
				@selection-change="handleSelectionChange"
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle?.headerCellStyle"
				@filter-change="filterChange"
			>
				<el-table-column type="selection" width="55" />
				<el-table-column prop="fileNameCh" label="文件名称" width="180" />
				<el-table-column prop="fileDataName" label="源文件名称" />
				<el-table-column
					prop="dataType"
					label="文件类型"
					:filters="[
						{ text: '矢量数据shp', value: '1' },
						{ text: '栅格数据', value: '2' },
						{ text: '3D数据', value: '3' },
					]"
					column-key="dataType"
					:filter-multiple="false"
				>
					<template #default="scope"> {{ filterDataType(scope.row.dataType, 'name') }} </template>
				</el-table-column>
				<el-table-column prop="createTime" label="上传时间" />
				<el-table-column prop="projectNameCh" label="项目" :filters="options" :filter-multiple="false" column-key="wokeSpaceName" />
				<el-table-column prop="fileRemarks" label="文件说明" show-overflow-tooltip />
				<!-- <el-table-column prop="publishStatus" label="发布状态" show-overflow-tooltip>
					<template #default="scope">
						<el-tag :color="scope.row.publishStatus === 1 ? '#DAF7C9' : '#E8EAF1'">{{ scope.row.publishStatus === 1 ? '已发布' : '未发布' }}</el-tag>
					</template>
				</el-table-column> -->
				<el-table-column label="操作">
					<template #default="scope">
						<div class="jColor">
							<span class="mr-4" @click="saveHandle(scope.row)" v-if="scope.row.dataType !== 3 && scope.row.publishStatus !== 1">发布</span>
							<span @click="exportHandle(scope.row)">导出</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="date" label="管理">
					<template #default="scope">
						<!-- <i class="iconfont icon-bianji1 jColor mr-4"></i> -->
						<i class="iconfont icon-shanchu jColor" @click="handleDelete(scope.row)"></i>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"> </pagination>
		</div>
		<fileUpload title="文件上传" ref="uploadFile" @refresh="getDataList" />
	</div>
</template>

<script lang="ts" name="fileManage" setup>
import { getFileList, delFileList, downFile, saveSubmit } from '/@/api/project/index';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import fileUpload from './components/filemanage/fileupload.vue';
import { handleBlobFile } from '/@/utils/other';
import { getIdProject } from '/@/api/admin/role';
import { useUserInfo } from '/@/stores/userInfo';
// 引入组件
const { t } = useI18n();
// 定义变量内容
const tableRef = ref();
const ids = ref([]);
const queryRef = ref();
const uploadFile = ref('');
const filterType = ref([
	{
		id: '1',
		type: 'application/octet-stream',
		name: '矢量数据shp',
	},
	{
		id: '2',
		type: 'image/tiff',
		name: '栅格数据',
	},
	{
		id: '3',
		type: 'model/gltf-binary',
		name: '3D数据',
	},
]);
const fileIds = ref([]);
const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: getFileList,
	isPage: true,
	props: {
		item: 'records',
		totalCount: 'total',
	},
	queryForm: {},
});
const { getDataList, tableStyle, currentChangeHandle, sizeChangeHandle } = useTable(state);
const options = ref([]);
//获取当前用户有哪些项目
const getInfoProject = async () => {
	const { data } = await getIdProject(useUserInfo().userInfos.roles);
	options.value = data.map((item, index) => {
		return {
			text: item.projectNameCh,
			value: item.wokeSpaceName,
		};
	});
};
getInfoProject();

// 搜索事件
const query = () => {
	state.dataList = [];
	getDataList();
};
//导出文件
const exportHandle = async (row: any) => {
	const data = await downFile(row.fileId);
	const type = filterDataType(row.dataType, 'type');
	handleBlobFile(data, row.fileDataName, type);
};
//批量导出
const handleUplaod = () => {
	fileIds.value.forEach((item) => {
		exportHandle(item);
	});
};
//发布
const saveHandle = async (row: any) => {
	try {
		await useMessageBox().confirm('确定发布吗？');
	} catch {
		return;
	}
	try {
		await saveSubmit({
			fileType: 'shpType',
			serviceType: 1,
			dataType: row.dataType,
			wokeSpaceName: row.wokeSpaceName,
			projectName: row.wokeSpaceName,
			storeName: row.fileDataName,
		});
		getDataList();
		useMessage().success('发布成功');
	} catch (error: any) {
		useMessage().error(error.msg);
	}
};
//判断类型
const filterDataType = (type: string, key: any) => {
	const typeName = filterType.value.find((item) => {
		return item.id == type;
	});
	if (typeName) {
		return typeName[key];
	} else {
		return undefined;
	}
};
//勾选多选框
const handleSelectionChange = (arr) => {
	ids.value = arr.map((item) => {
		return item.fileDataSourceId;
	});
	fileIds.value = arr;
};
// 清空搜索条件
const resetQuery = () => {
	queryRef.value.resetFields();
	state.dataList = [];
	getDataList();
};

const filterChange = (filter) => {
	if (filter['dataType']) {
		state.queryForm.dataType = filter.dataType.join(',');
		getDataList();
	} else if (filter['wokeSpaceName']) {
		state.queryForm.wokeSpaceName = filter.wokeSpaceName.join(',');
		getDataList();
	}
};
//文件上传
const fileAdd = () => {
	uploadFile.value.openDialog();
	uploadFile.value.reset();
};
// 删除操作
const handleDelete = async (row: any) => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		await delFileList([row.fileDataSourceId]);
		getDataList();
		useMessage().success(t('common.delSuccessText'));
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};
//批量删除
const handleDeletes = async () => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		await delFileList(ids.value);
		getDataList();
		useMessage().success(t('common.delSuccessText'));
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};
</script>
